import React from "react";
import '../assets/css/search.css'
//调取接口
import { getHotSearch, getSearch } from "../util/axios";
class Search extends React.Component {
  constructor() {
    super();
    //state 设置数据，当视图需要这个数据作为渲染的时候，我们把这个数据定义到state中。 如果这个数据只作为中间值，不建议放到state{} 中
    this.state = {
      // val: "",
      hotList: [], //热搜列表数组
      searchResult: [], //搜索的结果列表
    };
    //设置一个中间值
    this.val = ""; //用于控制删除按钮的显示隐藏
    this.inp = React.createRef(); //ref
  }
  //组件挂载
  componentDidMount() {
    //组件一加载就调取获取热搜列表事件
    this.getHotList();
  }
  //封装一个键盘抬起事件
  keyUp(e) {
    // this.setState({
    //   val: e.target.value,
    // });
    //把输入的内容赋值给val
    this.val = e.target.value;
    //剔除空状态
    if (e.target.value === "" || e.keyCode === 32) {
      // console.log(this.val);
      //一、把搜索结果列表置空
      this.setState({
        searchResult: [],
      });
      //二、把中间值val 置空
      return;
    }
    //调取搜索接口
    this.goSearchInfo(e.target.value);
    // if (e.keyCode == 13) {
    //   console.log(e.target.value, "e.target.value");

    // }
  }
  //清空事件
  del() {
    //清空输入框的内容
    this.inp.current.value = "";
    //把搜索结果置空
    this.setState({
      searchResult: [],
    });
  }
  //封装一个获取热搜的接口事件
  getHotList() {
    //调取热搜接口
    getHotSearch().then((res) => {
      // console.log(res, "热搜列表");
      if (res.code === 200) {
        this.setState({
          hotList: res.result.hots,
        });
      }
    });
  }
  //封装一个搜索事件
  goSearchInfo(keywords) {
    //点击除了调取接口之外，还要把值赋给input框
    this.inp.current.value = keywords;
    //调取搜索接口
    getSearch({
      keywords,
    }).then((res) => {
      // console.log(res, "搜索结果");
      if (res.code === 200) {
        this.setState({
          searchResult: res.result.songs,
        });
      }
    });
  }
  //封装一个跳转播放的方法
  goPlay(id) {
    //跳转播放
    this.props.history.push("/play?id=" + id);
  }
  render() {
    //不能在render函数中调用 setState({})
    const { hotList, searchResult } = this.state;
    // //这一步 实现的是，当点击热搜列表的时候，实现input有值
    this.val = this.inp.current ? this.inp.current.value : "";
    // if(this.inp.current){
    //   // this.setState({
    //   //   val:this.inp.current.value
    //   // })
    //   // val = this.inp.current.value
    // }
    //定义视图变量
    //热搜列表
    let hotInfo = (
      <ul className='hotInfo'>
        {hotList.map((item) => {
          return (
            <span
              onClick={this.goSearchInfo.bind(this, item.first)}
              key={item.first}
            >
              {" "}
              {item.first}
            </span>
          );
        })}
      </ul>
    );
    let searchInfo = (
      <ul className='searchInfo'>
        {searchResult.map((item) => {
          return (
            <li onClick={this.goPlay.bind(this, item.id)} key={item.id}>
              歌曲名称：{item.name}
            </li>
          );
        })}
      </ul>
    );
    return (
      <div>
        <div>
          <input type="text" ref={this.inp} onKeyUp={this.keyUp.bind(this)} className='input' placeholder='搜索歌曲、歌手、专辑'/>
          {this.val ? <span onClick={this.del.bind(this)} className='reset'>×</span> : ""}
        </div>
        {/* 利用条件判断 判断是否显示搜索列表 */}
        {searchResult.length > 0 ? searchInfo : hotInfo}
      </div>
    );
  }
}
export default Search;
